<template>
    <div class="v-progress">
        <span>{{sort}}</span>
        <div>
            <label>{{model.equipmentType | DictItem(mobileEquipmentType)}}</label>
            <div>
                <van-progress :percentage="total === 0? 0: ((model.num * 1)/ total * 100)"
                              stroke-width="8px"
                              :color="color"
                              :show-pivot="false" />
                <span>{{model.num}}</span>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        total: {
            type: Number,
            default: 0
        },
        model: {
            type: Object,
            default: _ => ({})
        },
        sort:{
            type: Number,
        },
        mobileEquipmentType:{
            type:Array,
            default(){
                return [];
            }
        },
        color: {
            type: String,
            default: '#3C88FF'
        }
    }
}
</script>

<style lang="less" scoped>
.v-progress {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 10px 10px 10px 12px;

    > span {
        font-size: 14px;
        font-weight: 500;
        color: #61677a;
        line-height: 17px;
        background: url("../../../../../assets/img/qzjx/mobile/icon_index.png")
            no-repeat center / cover;
        width: 16px;
        height: 16px;
        flex-shrink: 0;
    }

    > div {
        flex: 1;
        padding: 0 10px;
        display: flex;
        flex-direction: column;

        > label {
            font-size: 14px;
            font-weight: 400;
            color: #61677a;
            line-height: 20px;
            margin-bottom: 4px;
        }

        > div {
            display: flex;
            align-items: center;

            .van-progress {
                flex: 1;
            }

            > span {
                font-size: 16px;
                font-weight: 500;
                color: #252631;
                line-height: 22px;
                margin-left: 10px;
                flex-shrink: 0;
            }
        }
    }
}
</style>
